,<template>
  <div>
    <div @click="back">
      <van-nav-bar left-text="返回" left-arrow @click-left="back" title="最好律师" />
    </div>
    <div v-for="item in list" :key="item.id" class="Allren">
      <div>
        <p class="name-p">
          {{item.name}} ----
          <span class="smll">好评率:{{item.favorableRate}}%</span>
        </p>
        <p class="facp">
          法律专长:
          <span class="big">{{item.legalExpertiseName}}</span>
        </p>
        <p class="facp">质询人数: {{item.serviceTimes}}</p>
        <div class="nian">工作开始于: {{item.workStartAt}}</div>
        <div class="facp">律师执照: {{item.licenseNo}}</div>
        <img :src="'http://124.93.196.45:10001/'+item.avatarUrl" alt />
      </div>
      <p class="big_p">基本信息:</p>
      <div class="xingx">{{item.baseInfo}}</div>
      <p class="big_p">教育资讯:</p>
      <div class="jiaoyu">{{item.eduInfo}}</div>
    </div>
  </div>
</template>

<script>
import mixin from '@/mixin/flag'
import { goodlist } from '@/service/falv'
export default {
  mixins: [mixin],
  data() {
    return {
      list: [],
    }
  },

  async mounted() {
    const res = await goodlist()
    console.log(res)
    this.list = res.data.data
    console.log('this.list', this.list)
  },

  methods: {
       back() {
      this.$router.push('/AlllawView')
    },
  },
}
</script>

<style lang="scss" scoped>
.Allren {
  width: 100%;
  height: 500px;
  border-bottom: 1px solid red;
  img {
    vertical-align: middle;
    padding-left: 150px;
    margin: 10px 0;
  }
}
.xingx {
  font-size: 16px;
  overflow: hidden;
  padding-left: 14px;
  margin-top: 10px;
  font-size: 14px;
  color: #000;
  display: -webkit-box;
  -webkit-line-clamp: 2; //控制行数
  -webkit-box-orient: vertical;
}
.jiaoyu {
  font-size: 15px;
  padding-left: 14px;
  overflow: hidden;
  margin-top: 10px;
  font-size: 14px;
  color: #000;
  display: -webkit-box;
  -webkit-line-clamp: 2; //控制行数
  -webkit-box-orient: vertical;
}
.name-p {
  padding-top: 15px;
  font-size: 17px;
  text-align: center;
}
.facp {
  font-size: 17px;
  text-align: center;
  margin-top: 10px;
}
.mine {
  font-size: 17px;
  padding-left: 20px;
  margin-top: 10px;
}
.nian {
  font-size: 17px;
  text-align: center;
  margin-top: 10px;
}
.big_p {
  font-size: 16px;
  padding-left: 14px;
  margin: 10px 0;
}
.btn {
  width: 100px;
  height: 40px;
  font-size: 14px;
  margin: 10px 0;
  margin-left: 14px;
  background-color: pink;
  border: 1px solid red;
}
.goodfn {
  width: 100%;
  height: 40px;
  font-size: 14px;
}
.smll {
  font-size: 12px;
  color: red;
}
.big {
  font-size: 17px;
  font-weight: 800;
}
</style>